<template>
    <div class="control-sale-goods">
        <search-form :searchArray="searchArray" :searchObj="searchObj">
            <el-button class="btn search mL20" @click="add">新增</el-button>
        </search-form>
        <elTable :formData="formData">
                <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="rule"  label="规格" align="center"></el-table-column>
                <el-table-column prop="pw" label="批准文号" align="center"></el-table-column>
                <el-table-column prop="ph" label="商品批号" align="center"></el-table-column>
                <el-table-column prop="factory" label="生产厂商" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="editerRule(scope.row)">编辑规则</el-button>
                        <el-button type="text"  @click="deletes(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        title="添加商品"
        width="800px"
        hideButton
        >
            <search-form :searchArray="searcA" :searchObj="searchObj" :boxShadow="false">
            </search-form>
            <elTable :formData="formDatas">
                <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="rule"  label="规格" align="center"></el-table-column>
                <el-table-column prop="pw" label="批准文号" align="center"></el-table-column>
                <el-table-column prop="ph" label="商品批号" align="center"></el-table-column>
                <el-table-column prop="factory" label="生产厂商" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="120px;" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="addGoods(scope.row)">添加</el-button>
                    </template>
                </el-table-column>
        </elTable>
        </dialogs>
        <dialogs
        :visible="goodsEditerDialog"
        title="编辑规则"
        width="700px"
        @confirm="saveRule"
        confirmText="保存"
        >
            <el-form v-model="form" label-width="120px" :inline="true">
                
                <el-form-item prop="name" label="商品名称">
                    <el-input v-model.trim="form.name" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="规格">
                    <el-input v-model.trim="form.name" placeholder="请输入规格"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="批准文号">
                    <el-input v-model.trim="form.name" placeholder="请输入批准文号"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="采购价">
                    <el-input v-model.trim="form.name" placeholder="请输入采购价"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="参考零售价">
                    <el-input v-model.trim="form.name" placeholder="请输入参考零售价"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="生产厂商">
                    <el-input v-model.trim="form.name" placeholder="请输入生产厂商"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="最小包装数量">
                    <el-input v-model.trim="form.name" placeholder="请输入最小包装数量"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="专享价">
                    <el-input v-model.trim="form.name" placeholder="请输入专享价"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="单笔最低采购数">
                    <el-input v-model.trim="form.name" placeholder="请输入客户单笔最低采购数量"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="单笔最高采购数">
                    <el-input v-model.trim="form.name" placeholder="请输入客户单笔最高采购数量"></el-input>
                </el-form-item>
            </el-form>         
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'controlSaleGoods',
    components: {
        elTable
    },
    data () {
        return {
            goodsEditerDialog: {
                show: false
            },
            form: {},
            formData: {
                currentPage: 1,
                pageSize: 10,
                total: 2,
                data: [
                    {
                        id: '1',
                        name: '阿奇霉素分散片',
                        rule: '0.25g*12片/300',
                        pw: '国药准字H20083617',
                        ph: '20201245',
                        factory: '安徽永生堂药业有限责任公司'
                    },
                    {
                        id: '2',
                        name: '麻杏止咳片',
                        rule: '0.26g*40片/盒',
                        pw: '国药准字Z20027220',
                        ph: '20201246',
                        factory: '吉林省长恒药业有限公司'
                    },
                ]
            },
            formDatas: {
                currentPage: 1,
                pageSize: 10,
                total: 2,
                data: [
                    {
                        id: '3',
                        name: '麻杏止咳片2',
                        rule: '0.26g*40片/盒',
                        pw: '国药准字Z20027220',
                        ph: '20201246',
                        factory: '吉林省长恒药业有限公司'
                    },
                ]
            },
            searchObj: {
                name: '',
                pw: '',
                factory: ''
            },
            searcA: [
                {
                    type: 'input',
                    value: '',
                    label: '商品名称',
                    placeholder: '请输入商品名称',
                    key: 'name'
                },
                {
                    type: 'input',
                    value: '',
                    label: '批准文号',
                    placeholder: '请输入批准文号',
                    key: 'pw'
                },
                {
                    type: 'input',
                    value: '',
                    label: '生产厂商',
                    placeholder: '请输入生产厂商',
                    key: 'factory'
                }
            ],
            searchArray: [
                {
                    type: 'input',
                    value: '',
                    label: '商品名称',
                    placeholder: '请输入商品名称',
                    key: 'name'
                },
                {
                    type: 'input',
                    value: '',
                    label: '批准文号',
                    placeholder: '请输入批准文号',
                    key: 'pw'
                },
                {
                    type: 'input',
                    value: '',
                    label: '生产厂商',
                    placeholder: '请输入生产厂商',
                    key: 'factory'
                },
            ],
            visible: {
                show: false
            }
        }
    },
    methods: {
        add () {
            this.visible.show = true
        },
        editerRule () {
            this.goodsEditerDialog.show = true
        },
        deletes (item, index) {
            this.$confirm('确定要删除么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.formData.data.splice(index,1)
                    this.$message.success('删除成功')
                }).catch(() => {
            })
        },
        addGoods (item) {
            let lists = this.formData.data
            if (lists.filter(r => r.id == item.id).length) {
                lists = lists
                this.$message.error('已添加过，请勿重复添加')
            } else {
                lists.unshift(item)
                this.$message.success('添加成功')
            }
            this.visible.show = false
            setTimeout(() => {
                this.$set(this.formData, 'data', lists)
            }, 1000)
        },
        saveRule () {
            this.$message.success('保存成功')
            this.goodsEditerDialog.show = false
        }
    }
}
</script>
<style lang="scss" scoped>
.control-sale-goods {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>